<!DOCTYPE html>
<html lang="zxx">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="icon" href="images/favicon.png">
		<title></title>

		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="css/materialize.css">
		<link rel="stylesheet" href="css/loaders.css">
		<link rel="stylesheet" href="css/lightbox.css">
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" href="css/owl.carousel.min.css">
		<link rel="stylesheet" href="css/owl.theme.default.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/layer.css">

	</head>
	<style>
		.progress-container {
			width: 100% !important;
			height: 100% !important;
			margin-top: 12px;
		}

		#progress-container {
			background-color: #00b4f0;
		}
	</style>
	<body>

		<!-- navbar -->
		<div class="navbar">
			<div class="container">
				<div class="row">
					<div class="col s9">
						<div class="content-left" onclick="javascript:history.back(-1);">
							<i class="fa fa-chevron-left center"></i>
						</div>
					</div>

				</div>
			</div>
		</div>
		<!-- end navbar -->

		<!-- sidebar -->

		<!-- end sidebar -->
		<style>

		</style>
		<!-- list -->
		<div class="segments-page">
			<div class="container">
				<div class="pricing-table">
					<div class="pages-title">
						<h3>排单中心</h3>
						<div class="line"></div>
					</div>
					<div class="credit">
						<div class="area01 gradient01">
							<div class="card radius151500PX">
								<div class="user_info flex"><i class="user-photo radius50P"></i><span id="userInfo"> </span><i class="i radius50P">i</i></div>
								<div id="progress-container" class="progress-container">

								</div>

								<div id="slide">

								</div>

							</div>
						</div>

					</div>

				</div>
			</div>

		</div>
		<div class="pages-title">
			<h3>今日排单</h3>
			<div class="line"></div>
			<div class="list_box table-contents z-depth-1" style="min-height: 200px;padding: 0px 10px 0;">
				<table>
					<thead>
						<tr>
							<th>用户名</th>
							<th>排单金额</th>
							<th>排单时间</th>
						</tr>

					</thead>
					<tbody id="container">

					</tbody>

				</table>
			</div>
		</div>
		<!-- end list -->

		<script src="js/jquery.min.js"></script>
		<script src="js/materialize.js"></script>
		<script src="js/numscroller.js"></script>
		<script src="js/lightbox.js"></script>
		<script src="js/owl.carousel.min.js"></script>
		<script src="js/main.js"></script>
		<script src="js/layer.js"></script>
		<script src="js/jquerysession.js"></script>
		<script src="http://www.gongjuji.net/Content/files/jquery.md5.js"></script>
		<script src="js/index.js"></script>
		<script src="js/arc-progress.js"></script>
		<script src="js/mobileSelect.js"></script>
		<script>
			$(document).ready(function() {


				//请求今日排单信息
				var SchedulingListurl = 'Scheduling/SchedulingList';
				var SchedulingList = api_request(SchedulingListurl, 'GET');

				if (SchedulingList) {
					if (SchedulingList.code == 1) {
						var html = "";
						var data = SchedulingList.data.data;
						if (data) {
							for (var i = 0; i < data.length; i++) {
								var ls = data[i];
								html = "<tr><td>尾号" + ls.usermobile.slice(7) + "</td><td>" + ls.quota + "</td><td>" + ls.add_time +
									"</td></tr>"
								$('#container').append(html);
							}
						}

					}
				} else {
					html = "<div class='center'>今日暂无排单!</div>"
					$('#container').append(html);
				}

				//排单页面
				var Schedulingurl = 'Scheduling/SchedulingInfo';
				var SchedulingInfo = api_request(Schedulingurl, 'GET');
				if (SchedulingInfo.code == 1 && SchedulingInfo) {
					var state = '';
					var html = '';
					switch (SchedulingInfo.data.Scheduling_state) {
						case '1':
							html = "<span>排单总额度<h1>" + SchedulingInfo.data.Scheduling_amount +
								"</h1></span> <div  class='btn radius500PX'>开始时间:" + SchedulingInfo.data.Scheduling_StartTime +
								"</div><p class='number'>当日成功排单：<em>" + SchedulingList.data.count + "</em> 次</p>";
							break;
						case '2':
							html = "<p>排单结束时间:" + SchedulingInfo.data.Scheduling_StartTime +
								"</p><div class='btn radius500PX' onclick='addSchedu(" + SchedulingInfo.data.id +
								");'>我要排单</div><p>当日成功排单：<em>" + SchedulingList.data.count +
								"</em> 次</p><input type='text' readonly='readonly' placeholder='请选择排单天数' id='fate' style='text-align: center;'><input type='hidden' name='profit' id='profit'  value='' ><input type='number' min=10000  name='SingleAmount' id='SingleAmount' placeholder='排单金额'  style='text-align: center;'>";
							break;
						case '3':
							html = "<span>下次排单时间<p>" + SchedulingInfo.data.Scheduling_StartTime +
								"</p></span><div class='btn radius500PX'>排单已经结束</div><p class='number'>当日成功排单：<em>" + SchedulingList.data.count +
								"</em> 次</p>";
							break;
						default:

					}
					var current_amount = GetPercent(SchedulingInfo.data.Scheduling_current_amount, SchedulingInfo.data.Scheduling_amount);

					if (current_amount == 10000) {
						var progress = 1
					} else {
						var progress = '0.' + current_amount
					}


					$("#slide").append(html);

				}
				const arcProgress = new ArcProgress({
					el: "#progress-container",
					progress: progress,
					text: SchedulingInfo.data.Scheduling_current_amount,

					customText: [{
						text: "￥",
						size: "12px",
						color: "#fff",
						x: 100,
						y: 120
					}, {
						text: "剩余额度",
						size: "12px",
						color: "#fff",
						x: 100,
						y: 150
					}],
					textStyle: {
						y: 95,
						size: "24px",
						color: "#fff"
					},
					emptyColor: "rgba(73, 201, 245, .9)",
					fillColor: "rgba(255, 255, 255, .95)",
					observer(e, t) {
						// console.log('observer the animation', e, t);
					},
					animationEnd(e) {

						// console.log('the animation is end', e);
					}
				});




				var ProfitUrl = 'Scheduling/single_profit';
				var ProfitList = api_request(ProfitUrl, 'GET');

				var mobileSelect1 = new MobileSelect({
					trigger: '#fate',
					title: '天数选择',
					wheels: [{
						data: ProfitList.data
					}],
					transitionEnd: function(indexArr, data) {

					},
					callback: function(indexArr, data) {
						$("#profit")[0].value = data[0].id;
						$('#fate').attr('placeholder', data[0].value)
					}
				});
			});


			function addSchedu(sid) {

				if ($('#profit').val() == '') {
					layer.open({
						content: '请选择排单天数',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
					return false;
				}
				if ($('#SingleAmount').val() == '') {
					layer.open({
						content: '请熟人排单金额',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
					return false;
				}

				var Schedulingurl = 'Scheduling/add_schedu';



				var parm = {
					profit: $('#profit').val(),
					scheduling_id: sid,
					SingleAmount: $('#SingleAmount').val()
				};

				var SchedulingInfo = api_request(Schedulingurl, 'POST', parm);
				if (SchedulingInfo.code == 1) {
					layer.open({
						content: SchedulingInfo.data,
						skin: 'msg',
						time: 2 //2秒后自动关闭
							,
						end: function() {
							location.reload();
						}
					});
				}
			}
		</script>
	</body>
</html>
